<template>
  <div class="xiaoqu">
    <div class="text1">
      小区名称:<input type="text" v-model="value01" style="height: 36px">
        创建时间:
      <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" @click="select">搜索</el-button>

  </div>
    <div style="padding-top: 10px">
      <el-button type="primary"  @click="dialogFormVisible = true">新增小区</el-button>
    </div>

<!--增加弹框1-->
    <div>
      <el-dialog title="新增小区" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="门店名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属地区" :label-width="formLabelWidth">
            <el-cascader
                    :options="addressAll"
                    clearable
                    v-model="address1"
                    :props="{value:'label'}"

            ></el-cascader>
            <el-input v-model="address001" placeholder="请填写详细地址"></el-input>
          </el-form-item>
          <el-form-item label="门店坐标" :label-width="formLabelWidth">
            <el-button @click="getlocation">获取坐标</el-button>{{location1}}
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddate">确 定</el-button>
        </div>
      </el-dialog>
    </div>

<!--   编辑弹框信息   --------------->
      <div>
          <el-dialog title="编辑小区" :visible.sync="dialogFormVisible4">
              <el-form :model="form">
                  <el-form-item label="门店名称" :label-width="formLabelWidth" >
                      <el-input v-model="form.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="所属地区" :label-width="formLabelWidth">
                      <el-cascader
                              :options="addressAll"
                              clearable
                              v-model="address1"
                              :props="{value:'label'}"
                      ></el-cascader>
                      <el-input v-model="address001" placeholder="请填写详细地址"></el-input>
                  </el-form-item>
                  <el-form-item label="门店坐标" :label-width="formLabelWidth">
                      <el-button @click="getlocation">获取坐标</el-button>{{location1}}
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                  <el-button type="primary" @click="updatexinxi">确 定</el-button>
              </div>
          </el-dialog>
      </div>
<!--     查看弹框 ---------------->
      <div>
          <el-dialog title="查看关联门店" :visible.sync="dialogFormVisible2">
              <el-form :model="form">
                  <el-form-item  :label-width="formLabelWidth">
                      <el-input style="width: 200px" v-model="form.name" autocomplete="off" ></el-input>
                      <el-button @click="searchass" >搜索</el-button>
                      <el-button @click="dialogFormVisible2=false,addass()">添加关联门店</el-button>
                  </el-form-item>
                  <el-table
                          :data="chakanxiaoquList.list"
                          border
                          style="width: 840px"
                          color:black
                          :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
                      <el-table-column
                              fixed
                              label="序号"
                              width="120">
                          <template slot-scope="scope">
                              <el-button type="text">{{scope.$index + 1}}</el-button>
                          </template>
                      </el-table-column>
                      <el-table-column
                              prop="shopName"
                              label="名称"
                              width="120">
                      </el-table-column>
                      <el-table-column
                              prop="shopId"
                              label="ID"
                              width="120">
                      </el-table-column>
                      <el-table-column
                              prop="shopSort"
                              label="排序"
                              width="120">
                          <input type="text" style="width: 95px;height: 40px">
                      </el-table-column>
                      <el-table-column
                              prop="shopAddress"
                              label="地址"
                              width="120">
                      </el-table-column>
                      <el-table-column
                              prop="shopAddress"
                              label="订单数量"
                              width="120">
                      </el-table-column>
                      <el-table-column
                              label="操作"
                              width="120">
                          <template slot-scope="scope">
                              <el-button type="text" size="small" @click="handleClick1(scope.row)">删除</el-button>
                          </template>
                      </el-table-column>
                  </el-table>

              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
              </div>
          </el-dialog>
      </div>
<div>
<!--      <el-dialog width="650px" title="添加关联门店" :visible.sync="dialogFormVisible5">-->
<!--          <div style="margin-bottom: 30px">-->
<!--              <input v-model="addguanlianname" type="text" class="el-input__inner">-->
<!--              <el-button id="btn5" type="primary" icon="el-icon-search" @click="searchass1">搜索</el-button>-->
<!--          </div>-->
<!--          <el-table-->
<!--                  ref="multipleTable"-->
<!--                  :data="chakanxiaoquList1.list"-->
<!--                  tooltip-effect="dark"-->
<!--                  style="width: 600px"-->
<!--                  :header-cell-style="{'background-color': '#409EFF', color:'#fff'}"-->
<!--                  @selection-change="handleSelectionChange">-->
<!--              <el-table-column-->
<!--                      prop=""-->
<!--                      label="-"-->
<!--                      width="100">-->
<!--                  <template slot-scope="scope">-->
<!--                      <el-checkbox @change="change(scope.row.shopId)"></el-checkbox>-->
<!--                  </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                      prop="shopName"-->
<!--                      label="名称"-->
<!--                      width="100">-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                      prop="shopId"-->
<!--                      label="ID"-->
<!--                      width="100">-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                      prop="shopSort"-->
<!--                      label="排序"-->
<!--                      width="100">-->
<!--                  <template slot-scope="scope">-->
<!--                      <input v-model="shopSort" style="width: 75px" type="text" class="el-input__inner">-->
<!--                  </template>>-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                      prop="shopAddress"-->
<!--                      label="地址"-->
<!--                      width="100">-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                      prop="shopOrderCount"-->
<!--                      label="订单数量"-->
<!--                      width="100">-->
<!--              </el-table-column>-->

<!--          </el-table>-->
<!--          <el-button @click="dialogFormVisible5 = false" style="margin-left: 450px">取 消</el-button>-->
<!--          <el-button type="primary" @click="addguanlianmendian(),searchass()">确 定</el-button>-->
<!--      </el-dialog>-->
</div>
<!--      --------------------------------------------------------------------------------->
      <el-dialog
              title="添加关联门店"
              :visible.sync="dialogFormVisible5"
              width=650px
              center>
          <div class="guanlian">'
              <div style="margin-bottom: 30px">
                  <input style="width: 300px" v-model="addguanlianname"  type="text" class="el-input__inner">
                  <el-button id="btn5" type="primary" icon="el-icon-search" @click="searchass1">搜索</el-button>
              </div>
              <el-table
                      ref="multipleTable"
                      :data="chakanxiaoquList1.list"
                      tooltip-effect="dark"
                      @selection-change="handleSelectionChange"
                      :header-cell-style="{background:'#409EFF',color:'#fff'}"
                      style="width: 100%">
                  <el-table-column
                          type="selection"
                          width="100">
                  </el-table-column>
                  <el-table-column
                          prop="shopName"
                          label="名称"
                          width="100">
                  </el-table-column>
                  <el-table-column
                          prop="shopId"
                          label="ID"
                          width="100">
                  </el-table-column>
                  <el-table-column
                          label="排序"
                          show-overflow-tooltip>
                      <template slot-scope="scope">
                          <input v-model="shopSort" style="width: 75px" type="text" class="el-input__inner">
                      </template>>
                  </el-table-column>
                  <el-table-column
                          prop="shopAddress"
                          label="坐标"
                          width="100"
                          show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column
                          prop="shopOrderCount"
                          label="订单数量"
                          width="100"
                          show-overflow-tooltip>
                  </el-table-column>
              </el-table>
              <div style="margin-top: 20px">
                  <el-button @click="baovunguanlian">确定</el-button>
                  <el-button @click="dialogFormVisible5 = false">取消</el-button>
              </div>
          </div>
          <div class="block">
              <el-pagination
                      layout="prev, pager, next"
                      :total="1"
                      @current-change="handleCurrentChange1">
              </el-pagination>
          </div>
      </el-dialog>
      <!--      ----------------------------------------------------------------------------------------->

<!--主页面表格-->
    <el-table
            :data="xiaoquList.list"
            border
            style="width: 1200px"
            color:black
            :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
      <el-table-column
              fixed
              prop="communityId"
              label="ID"
              width="150">
      </el-table-column>
      <el-table-column
              prop="communityName"
              label="名称"
              width="150">
      </el-table-column>
      <el-table-column
              prop="communityAddress"
              label="位置"
              width="180">
      </el-table-column>
      <el-table-column
              prop="communityUserCount"
              label="用户数量"
              width="180">
      </el-table-column>
      <el-table-column
              prop="communityShopCount"
              label="关联门店"
              width="180">
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="创建时间"
              width="180">
      </el-table-column>
      <el-table-column

              label="操作"
              width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row),looklook()" type="text" size="small">查看关联门店</el-button>
          <el-button type="text" size="small" @click="handleClick(scope.row),xianshid4()">编辑小区</el-button>
          <el-button type="text" size="small" @click="handleClick(scope.row),dialogFormVisible3 = true">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
<!--页码-->
    <div class="block">
      <el-pagination
              layout="prev, pager, next"
              :total="1">
      </el-pagination>
    </div>
<!--      小谈框-->
      <div>
          <el-dialog title="是否删除" :visible.sync="dialogFormVisible3">
              <div slot="footer" class="dialog-footer">
                  <el-button @click="quxiaochuxian">取 消</el-button>
                  <el-button type="primary" @click="deletexinxi">确 定</el-button>
              </div>
          </el-dialog>
      </div>



  </div>
</template>
<script>
    export default {
      name: "XiaoquComponent",
      data() {
        return {value01:'',
          value1: '',
          value2: '',
            input:'',
          dialogTableVisible: false,
          dialogFormVisible: false,
            dialogFormVisible2: false,
            dialogFormVisible3: false,
            dialogFormVisible4: false,
            dialogFormVisible5:false,
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          formLabelWidth: '120px',
          xiaoquList:{},
            chakanxiaoquList:{},
            chakanxiaoquList1:{},
          addressAll: [],   //省市区
          address1:[], //你选择的地址
            address01:'',
            address001:'' ,
            location1:'',
            list1:{},
            addOrUpdateFlag:'',
            communityAddress:'',
            communityAreaCode:'',
            communityCity:'',
            communityCoordinates:'',
            communityDistrict:'',
            communityId:'',
            communityLatitude:'',
            communityLongitude:'',
            communityName:'',
            communityProvince:'',
            communityShopCount:'',
            communityStatus:'',
            communityUserCount:'',
            createTime:'',
            distance:'',
            shopIdArr:[],
            addguanlianname:'',
            communityId1:'',
            getids:[],



        }
      },
      created() {//默认请求全部商品
        this.getAllProvinceAndCityList();
          if (this.value1.length!=0) {
              //时间转字符串
              var oldtime = this.value1[0].getFullYear()+"-"+ (this.value1[0].getMonth() + 1) +"-"+ this.value1[0].getDate() + " 00:00:00";
              var newtime = this.value1[1].getFullYear()+"-"+ (this.value1[1].getMonth() + 1) +"-"+ (this.value1[1].getDate()+1) + " 00:00:00";
          }
          this.axios.request("/community/communityList", {params:{
                  name:"",
                  startTime:oldtime,
                  endTime:newtime,
                  pageNum:1,
                  pageSize:10,
                  communityName:"",
              }}).then((res)=>{
              this.xiaoquList = res.data.data;
              console.log(
                  this.xiaoquList
              )
          }).catch((err)=>{

          })
      },
        methods:{
            handleClick(row) {
                this.address1=[];
                console.log(row);
                this.addOrUpdateFlag=row.addOrUpdateFlag;
                this.communityAddress=row.communityAddress;
                this.communityAreaCode=row.communityAreaCode;
                this.communityCity=row.communityCity;
                this.communityCoordinates=row.communityCoordinates;
                this.communityDistrict=row.communityDistrict;
                this.communityId=row.communityId;
                this.communityLatitude=row.communityLatitude;
                this.communityLongitude=row.communityLongitude;
                this.communityName=row.communityName;
                this.communityProvince=row.communityProvince;
                this.communityShopCount=row.communityShopCount;
                this.communityStatus=row.communityStatus;
                this.communityUserCount=row.communityUserCount;
                this.createTime=row.createTime;
                this.distance= row.distance;
                console.log(this.communityId);
                // this.open();
                // this.dialogFormVisible3 = true;
                this.form.name=this.communityName;
                this.address1.push(this.communityProvince);
                this.address1.push(this.communityCity);
                this.address1.push(this.communityDistrict);
                this.address001=this.communityAddress;
                this.getlocation();
            },
            handleClick1(row){
                console.log(row);
                this.communityId1=row.shopId;
                console.log(this.communityId1);
                this.deleteci();
            },
            shujuclear(){
                this.address1=[];
                this.addOrUpdateFlag='';
                this.communityAddress='';
                this.communityAreaCode='';
                this.communityCity='';
                this.communityCoordinates='';
                this.communityDistrict='';
                this.communityId='';
                this.communityLatitude='';
                this.communityLongitude='';
                this.communityName='';
                this.communityProvince='';
                this.communityShopCount='';
                this.communityStatus='';
                this.communityUserCount='';
                this.createTime='';
                this.distance= '';

                // this.open();
                // this.dialogFormVisible3 = true;
                this.form.name='';
            },


            xianshid4(){
                this.dialogFormVisible4 = true;
            },

        //  得到所有省份
        getAllProvinceAndCityList() {

          // 获取全国所有省份和城市的列表
          var that = this;
          this.$http
                  .get("https://restapi.amap.com/v3/config/district", {
                    // 高德地图的API
                    params: {
                        key: "7f73f1aeafb9ae63dcd6122b87ee79e5", // 这个是申请的 Key，读者自行写入
                      keywords: "中国",
                      subdistrict: 3,
                      extensions: "base",
                    },
                  })
                  .then((response) => {
                    console.log(response.data)


                    for(let i = 0;i<response.data.districts[0].districts.length;i++){
                      let provinceMap = new Map();
                      provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
                      provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
                      provinceMap.children = [];
                      that.addressAll.push(provinceMap);  //添加省份
                      for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                        let cityMap = new Map()
                        cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                        cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                        cityMap.children = [];
                        provinceMap.children.push(cityMap); //添加市
                        for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                          let areaMap = new Map()
                          areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                          areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                          cityMap.children.push(areaMap);   //添加区县
                        }
                      }
                    }
                  }).catch((err)=>{

          });
        },
            //模糊查询
            select(){
                // console.log(this.value1);
                // let date=new Date();
                // console.log(date);
                if (this.value1.length!=0) {
                    //时间转字符串
                    var oldtime = this.value1[0].getFullYear()+"-"+ (this.value1[0].getMonth() + 1) +"-"+ this.value1[0].getDate() + " 00:00:00";
                    var newtime = this.value1[1].getFullYear()+"-"+ (this.value1[1].getMonth() + 1) +"-"+ (this.value1[1].getDate()+1) + " 00:00:00";
                }
                this.axios.request("/community/communityList", {params:{
                        name:this.value01,
                        startTime:oldtime,
                        endTime:newtime,
                        pageNum:1,
                        pageSize:10,
                        communityName:this.value01,
                    }}).then((res)=>{
                    this.xiaoquList = res.data.data;
                    this.value1=[];
                    console.log(this.value1)

                    // console.log(
                    //     this.xiaoquList
                    // )
                }).catch((err)=>{

                })

            },
            //获得坐标
            getlocation(){
            this.address01="";
            this.address01=this.address1.join("")+this.address001;
                this.axios.request("https://restapi.amap.com/v3/geocode/geo", {params:{
                        key:"7f73f1aeafb9ae63dcd6122b87ee79e5",
                        address: this.address01,
                    }}).then((res)=>{
                    this.location1 = res.data.geocodes[0].location;
                }).catch((err)=>{

                })

            },
            //添加小区数据
            adddate(){
                this.dialogFormVisible = false;
                this.axios.post("/community/communityUpdate",{
                    addOrUpdateFlag: 1,
                communityAddress:this.address001,
                communityAreaCode: "",
                communityCity:this.address1[1],
                communityCoordinates:this.address1[1]+this.address1[2] ,
                communityDistrict: this.address1[2],
                communityId: "",
                communityLatitude: "",
                communityLongitude: "",
                communityName:this.form.name,
                communityProvince:this.address1[0],
                }).then((res)=>{
                    console.log(res.data);
                }).catch((err)=>{

                });
                alert("添加成功");
                window.location.reload();
            },
      //      删除数据
            deletexinxi(){
                this.axios.post("/community/communityRemove",{
                    communityId:this.communityId
                }).then((res)=>{
                    console.log(res.data);
                }).catch((err)=>{

                });
                this.dialogFormVisible3 = false;
                alert("删除成功");
                window.location.reload();

            },
            open() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            shuaxin(){
                this.axios.request("/community/communityList", {params:{
                        name:"",
                        startTime:"",
                        endTime:"",
                        pageNum:1,
                        pageSize:10,
                        communityName:"",
                    }}).then((res)=>{
                    this.xiaoquList = res.data.data;
                    console.log(
                        this.xiaoquList
                    )
                }).catch((err)=>{

                })
            },
            quxiaochuxian(){
                this.dialogFormVisible3 = false;
                alert("已成功取消删除");
                window.location.reload();
            },
            updatexinxi(){
                this.dialogFormVisible4 = false;
                this.axios.post("/community/communityUpdate",{
                    addOrUpdateFlag: 2,
                    communityAddress:this.address001,
                    communityAreaCode: 0,
                    communityCity:this.address1[1],
                    communityCoordinates:this.address1[1]+this.address1[2] ,
                    communityDistrict: this.address1[2],
                    communityId: this.communityId,
                    communityLatitude: "",
                    communityLongitude: "",
                    communityName:this.form.name,
                    communityProvince:this.address1[0],
                    communityShopCount: 0,
                    communityStatus: 1,
                    communityUserCount: 0,
                    createTime:this.createTime,
                    distance:null,

                }).then((res)=>{
                    console.log(res.data);
                });
                window.location.reload();
                alert("修改成功");
                this.shujuclear();


            },
            deleteci(){
                // console.log(this.communityId);
                // console.log(this.communityId1);
                this.axios.post("/associatedStores/associatedStoresRemove", {
                    panghuCommunityId: this.communityId,
                panghuShopId:this.communityId1,

                }).then((res)=>{
                    console.log(res.data);
                }).catch((err)=>{
                });
                this.dialogFormVisible2=false;


            },
            looklook(){
                this.form.name='';
                this.axios.request("/associatedStores/associatedStoresList",{params:{
                        pageNum: 1,
                        pageSize: 10,
                        shopName: "",
                        communityId:this.communityId
                    }}).then((res)=>{
                    this.chakanxiaoquList = res.data.data;

                }).catch((err)=>{

                });
                this.dialogFormVisible2 = true;
            },
            searchass(){
                this.axios.request("/associatedStores/associatedStoresList",{params:{
                        pageNum: 1,
                        pageSize: 10,
                        shopName: this.form.name,
                        communityId:this.communityId
                    }}).then((res)=>{
                    this.chakanxiaoquList = res.data.data;
                }).catch((err)=>{

                })
            },
            searchass1(){
                this.axios.request("/associatedStores/findShopListByAdd",{params:{

                        pageNum: 1,
                        pageSize: 10,
                        shopName: this.addguanlianname,
                        communityId:this.communityId
                    }}).then((res)=>{
                    this.chakanxiaoquList1 = res.data.data;
                }).catch((err)=>{

                })
            },
            addass(){
                this.dialogFormVisible5=true;
                this.axios.request("/associatedStores/findShopListByAdd",{params:{
                        pageNum: 1,
                        pageSize: 10,
                        shopName: "",
                        communityId:this.communityId
                    }}).then((res)=>{
                    this.chakanxiaoquList1 = res.data.data;

                }).catch((err)=>{

                });

            },

            change(shopId){
                this.shopIdArr.push(shopId);

            },
            addguanlianmendian(){
                this.dialogFormVisible3 = false;
                console.log(this.shopIdArr);
                console.log(this.communityId);
                this.axios.post("/associatedStores/addAssociatedStores", {
                    fendeShopCommunityList: this.shopIdArr,
                    panghuCommunityId: this.communityId
                }).then((res)=>{
                    this.alladdAssociateCommunity = res.data.data;
                    this.chakanxiaoquList = this.alladdAssociateCommunity.list;
                    console.log(
                        this.alladdAssociateCommunity
                    )
                }).catch((err)=>{
                });
                this.dialogFormVisible5 = false;


                this.dialogFormVisible2 = true;


            },
            /*关联门店弹窗按钮绑定事件跳到表单*/
            toggleSelection() {
                console.log(this.tableData.total);
                this.axios.request("/associatedStores/findShopListByAdd", {
                    params: {
                        pageNum:1,
                        pageSize: 10,
                        shopName: '',
                        communityId: this.communityId,
                    }
                }).then((res) => {
                    this.tableData = res.data.data;
                }).catch(() => {
                })

                this.dialogFormVisible5 = true;
            },
            /*关联门店表单管理分页处理*/
            handleCurrentChange1(page) {
                // 更新当前页码
                this.currentPage = page;
                // 重新加载数据
                this.toggleSelection();
            },
            /*获取选择门店的行数*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            /*保存关联门店*/
            baovunguanlian(){
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    this.getids.push(this.multipleSelection[i].shopId);
                };
                this.axios.post("/associatedStores/addAssociatedStores",{
                    fendeShopCommunityList:this.getids,
                    panghuCommunityId:this.communityId,
                }).then(() => {
                    console.log("保存成功");
                }).catch(()=>{
                    console.log("警告!!")
                })
                this.dialogFormVisible5 = false;
            },

            },

    }
</script>
<style scoped>
.xiaoqu{
    height: 800px;
    /*background-color: red;*/
}
  .txt1{
    line-height: 36px;
    text-align: center;
  }
  .box{
    text-align: center;
  }

</style>